<template>
  <div class="songs-container">
    <div class="tab-bar">
      <span class="item" :class="{ active: tag === 0 }" @click="tag = 0">全部</span>
      <span class="item" :class="{ active: tag === 7 }" @click="tag = 7">华语</span>
      <span class="item" :class="{ active: tag === 96 }" @click="tag = 96">欧美</span>
      <span class="item" :class="{ active: tag === 8 }" @click="tag = 8">日本</span>
      <span class="item" :class="{ active: tag === 16 }" @click="tag = 16">韩国</span>
    </div>
    <!-- 底部的table -->
    <div class="song-card-wrap">
      <SongCard :songs="songs" />
    </div>
  </div>
</template>

<script>
import { getNewSongs, getSongDetail } from 'network/request'
import { mapState, mapMutations, mapActions } from '@/store/helper/music'
export default {
  name: 'songs',
  data() {
    return {
      songs: [],
      tag: 0
    }
  },

  created() {
    this._getNewSongs()
  },

  watch: {
    tag() {
      this._getNewSongs()
    }
  },
  methods: {
    // 获取最新音乐
    async _getNewSongs() {
      const { data } = await getNewSongs({ areaId: this.tag })
      // 获取歌单详情
      const newSongs = await this._getPlaylistDetail(data.slice(0, 50).map(x => x.id))
      this.songs = newSongs
    },
    // 获取歌单详情
    async _getPlaylistDetail(trackIds) {
      let params = this.$utils.songDetailParams(trackIds)
      const { songs } = await getSongDetail(params)
      return songs.map(x => this.$utils.createSong(x))
    },
    onClickSong(index) {
      this.startSong(this.songs[index])
      this.setPlaylist(this.songs)
    },
    ...mapMutations(['setPlaylist']),
    ...mapActions(['startSong'])
  },
  computed: {
    ...mapState(['currentSong'])
  }
}
</script>

<style lang="scss" scoped>
.songs-container {
  padding: 12px;
  .tab-bar {
    display: flex;
    justify-content: flex-end;

    .item {
      padding: 12px 0;
      margin: 0 12px;
      color: var(--tab-item-color);
      font-size: 12px;
      cursor: pointer;
      &:hover {
        color: var(--tab-item-hover-color);
      }
      &.active {
        color: $theme-color;
        &:hover {
          color: $theme-color;
        }
      }
    }
  }
}
</style>
